/**
 * Created by caosh on 2018/5/13 0013.
 */
var StaffRole = new Vue({
    el: '#staff-role',
    data: {
        roleList: [],
        isShowAdd: false,
        isShowEdit: false,
        role: {
            'roleId': '',
            'roleName': '',
            'roleDesc': '',
            'accessId': []
        },
        accessList:[],
        hasCheckedAccessList:[]
    },
    methods: {
        getRoleList: function () {
            var _this = this;
            _this.setAjaxOptions('/getRoleList', null, function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    _this.roleList = result.data;
                } else {
                    console.log(result.errMsg);
                }
            });
            _this.doAjax();
        },
        openEdit: function (role) {
            if (!this.isShowEdit && !this.isShowAdd) {
                this.role = role;
                this.isShowEdit = !this.isShowEdit;
            }
            Vue.useLayerForm(this.layerFormCallBack);
        },
        openAdd: function () {
            if (!this.isShowEdit && !this.isShowAdd) {
                this.isShowAdd = !this.isShowAdd;
            }
            Vue.useLayerForm(this.layerFormCallBack);
        },
        addRole: function () {
            var _this = this;

            if (!_this.checkRole()) {
                return;
            }

            _this.setAjaxOptions('/addRole', _this.role, function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    _this.isShowAdd = false;
                } else {
                    console.log(result.errMsg);
                }
            });

            _this.doAjax();
        },
        editRole: function () {
            var _this = this;

            if (!_this.checkRole()) {
                return;
            }

            _this.setAjaxOptions('/editRole', _this.role, function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    _this.isShowEdit = false;
                } else {
                    console.log(result.errMsg);
                }
            });

            _this.doAjax();
        },
        checkRole: function () {
            if (this.role.roleName.length==0) {
                this.changeStatus(['roleNameClassObj'], 'isError');
                return false;
            }

            return true;
        },
        checkAll: function () {
            var checkboxs = null;
            if (this.isShowAdd) {
                checkboxs = $('.increase .layui-form-checkbox:not(.layui-form-checked)');
            } else if (this.isShowEdit) {
                checkboxs = $('.edit .layui-form-checkbox:not(.layui-form-checked)');
            }
            checkboxs.trigger('click');
        },
        checkNone: function () {
            var checkboxs = null;
            if (this.isShowAdd) {
                checkboxs = $('.increase .layui-form-checked');
            } else if (this.isShowEdit) {
                checkboxs = $('.edit .layui-form-checked');
            }
            checkboxs.trigger('click');
        },
        resetRole: function () {
            this.role = {
                'roleId': '',
                'roleName': '',
                'roleDesc': '',
                'accessId': []
            };
        },
        getAccessList: function () {
            var _this = this;
            _this.setAjaxOptions('/getAccessList', null, function (result, status, jqXHR) {
                if (result.retCode == 0) {
                    for (var i=0, len=result.data.length; i<len; i++) {
                        var access = result.data[i];
                        _this.recursive(access);
                    }

                    _this.accessList = result.data;
                } else {
                    console.log(result.errMsg);
                    _this.accessList = [];
                }
            });
            _this.doAjax();
        },
        recursive: function (access) {
            if (!access.child || access.child.length == 0) {
                Vue.set(access, 'checked', false);
                this.hasCheckedAccessList.push(access);
                return;
            }

            for (var i=0, len=access.child.length; i<len; i++) {
                this.recursive(access.child[i]);
            }
        },
        layerFormCallBack: function (form) {
            var _this = this;
            form.on('checkbox', function(data){
                _this.role.accessId = _this.role.accessId || [];
                if (data.elem.checked) {
                    _this.role.accessId.push(data.value);
                } else {
                    var index = _this.role.accessId.indexOf(data.value);
                    if (index != -1) {
                        _this.role.accessId.splice(index, 1);
                    }
                }
            });
        }
    },
    mixins: [AjaxMixin, StatusMixin, UserMixin],
    mounted: function () {
        Vue.useLayerElement();
        this.getRoleList();
        this.getAccessList();
        this.resetRole();
    },
    watch: {
        'role.accessId': {
            handler: function (val, oldVal) {
                console.log(val);

            },
            deep: true
        },
        'isShowAdd': function (val, oldVal) {
            if (!val) this.resetRole();
            this.resetClassObj(['roleNameClassObj']);
        },
        'isShowEdit': function (val, oldVal) {
            if (!val) this.resetRole();
            this.resetClassObj(['roleNameClassObj']);
        }
    }
});